import React from 'react'
import {Form, Input,Table,Modal,message} from 'antd'
import {getPlayList,getById,update,del} from '../../api/index'
import scroll from '../../utils/scroll'
import './style.css'

const { confirm } = Modal;

class Home extends React.Component {
  constructor(params) {
    super()
    this.state = {
      visible:false,
      currentPage:1,
      dataSource:[],
      count:20,
      loading:false,
      curId:''
    }
  }

  handleEdit=(record)=>{
    getById({
      id:record._id
    }).then(res=>{
      let item = res.data.data
      this.props.form.setFieldsValue({
        name:item.name,
        copywriter:item.copywriter
      });
      this.setState({
        visible: true,
        curId:item._id
      });
    })
  }

  handleDel=(record)=>{
    console.log(record)
    confirm({
      title: '删除?',
      content: '确认删除本条信息？',
      onOk:() =>{
        del({
          id:record._id
        }).then(res=>{
          if(res.data.data.deleted > 0){
            message.success('删除成功')
          }else{
            message.error('删除失败')
          }
          this.setState({
            dataSource:[]
          });
          this.getList()
        })
      },
      onCancel() {},
    });
  }
  handleOk=()=>{
    let cityInfo = this.props.form.getFieldsValue()
    update({
      ...cityInfo,
      _id:this.state.curId
    }).then(res=>{
      if(res.data.data.modified > 0){
        message.success('更新成功')
      }else{
        message.error('更新失败')
      }
      this.setState({
        visible: false,
        dataSource:[]
      });
      this.getList()
    })
    
  }
  handleCancel=()=>{
    this.setState({
      visible: false,
    });
  }
  handleTableChange=(page)=>{
    // console.log(page)
  }
  componentWillMount() {
    this.getList()
  }

  componentDidMount() {
    scroll.start(this.getList)
  }

  getList=()=>{//获取歌单列表
    this.setState({
      loading:true
    })
    getPlayList({
      start:this.state.dataSource.length,
      count:this.state.count
    }).then(res=>{
      let data = [...this.state.dataSource,...res.data.data]
      if(res.data.data.length < this.state.count){
        scroll.end()
      }
      this.setState({
        dataSource:data,
        loading:false
      })
    })
  }

  

  render() {
    const columns = [
      {
        title: '封面',
        dataIndex: '',
        key:'img',
        render:(record)=> <img src={record.picUrl} alt="" style={{width:'50px',height:'50px'}}/>
      },
      {
        title: '名称',
        dataIndex: 'name',
        key:'name'
      },
      {
        title: '描述',
        dataIndex: 'copywriter',
        key:'copywriter'
      },
      {
        title: '操作',
        dataIndex: '',
        render: (text, record) => <div><a onClick={()=>this.handleEdit(record)}>编辑</a><a className='ml15' onClick={()=>this.handleDel(record)}>删除</a></div>,
      }
    ];
    const { getFieldDecorator } = this.props.form;

    return (
      <div className='home'>
        <div className='container'>
          <Table className='noPadingRow' 
          loading={this.state.loading} 
          dataSource={this.state.dataSource} 
          rowKey={record=>record.id}
          columns={columns} pagination={false}/>
        </div>
        <Modal
          title="编辑"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Form layout='vertical' name="nest-messages">
            <Form.Item  label="名称">
              {getFieldDecorator('name')(
                <Input placeholder="请输入名称"/>,
                )}
            </Form.Item>
            <Form.Item label="内容">
              {getFieldDecorator('copywriter')(
                <Input.TextArea placeholder="请输入内容"/>,
                )}
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }
}

export default Form.create()(Home)